<template>
	<view>
		<view v-if="list.length<=0 || !list" style="margin:200rpx 0;">
			<u-loading-icon mode="semicircle" v-if="loading"></u-loading-icon>
			<view class="tips">{{Tips}}</view>
		</view>
		<view v-else>
			<view>
				<view class="allList-card" v-for="(data,v) in list" @click="goView(data.wid)">
					<view class="title">
						<view style="display: flex;justify-content: space-between" v-if="data.delete_time==0">
							<view :class="['tag','s'+data.status]" v-if="data.status==2">处理中</view>
							<view :class="['tag','s'+data.status]" v-else-if="data.status==1">审核中</view>
							<view :class="['tag','s'+data.status]"
								v-else-if="data.status==3 || data.status==4 || data.status==5">已回复</view>
							<view :class="['tag','s'+data.status]" v-else-if="data.status==7">已转交</view>
							<view class="time">{{$u.timeFormat(data.create_time, 'yyyy-mm-dd')}}</view>
						</view>
						<view v-else style="display: flex;justify-content: space-between">
							<view class="tag delete" v-if="data.status==2">已删除</view>
							<view class="time">{{$u.timeFormat(data.create_time, 'yyyy-mm-dd')}}</view>
						</view>
						<view class="t" v-if="data.delete_time==0">{{data.title}}</view>
						<view v-else class="t deletetitle">{{data.title}}</view>
					</view>
					<view class="desc">
						{{data.content}}
					</view>
				</view>
				<u-loading-icon mode="semicircle" v-if="!moreClock"></u-loading-icon>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getMsg
	} from '@/api/api.js';
	export default {
		name: 'Lylist',
		props: {
			order: String,
			my: String,
			local: String,
			ltype: Number,
		},
		data() {
			return {
				list: [],
				loading: true,
				Tips: '',
				query: 0,
				page: 1,
				current_page: 0,
				last_page: 0,
				orderValue: 'create_time',
				moreClock: true
			}
		},
		mounted() {
			this.getList(this.orderValue)
		},

		methods: {
			getPage(e) {
				this.query = e
				if (this.moreClock) {
					if (this.last_page > this.current_page) {
						this.moreClock = false
						this.getList(this.orderValue, parseInt(this.current_page) + 1)
					}
				}
			},
			getIndexPage(order) {
				if (this.moreClock) {
					if (this.last_page > this.current_page) {

						this.getList(order ? order : this.orderValue, parseInt(this.current_page) + 1)
					}
				}
			},
			Refresh(e) {
				this.loading = true;
				this.list = []
				this.Tips = ''
				this.query = e
				this.getList(this.orderValue)
			},
			checkorder() {
				if (this.order == 'create_time') {
					this.order = 'reply_time'
					this.orderName = '回复时间'
				} else {
					this.order = 'create_time'
					this.orderName = '发帖时间'
				}
			},
			goView(wid) {
				uni.navigateTo({
					url: '/pages/index/thread?wid=' + wid
				})
			},
			getList(order, page) {
				let _this = this
				this.moreClock = false
				let newPage = page ? page : _this.page
				if (newPage <= 1) {
					_this.list = []
				}
				getMsg({
					order: order,
					my: _this.my,
					page: newPage,
					query: _this.query,
					ltype: _this.ltype
				}).then(r => {
					if (r.data.code === 200) {
						if (r.data.data.total > 0) {
							_this.list = newPage > 1 ? _this.list.concat(r.data.data.data) : r.data.data.data
							_this.last_page = r.data.data.last_page
							_this.current_page = r.data.data.current_page
							_this.moreClock = true
						} else {
							_this.loading = false;
							_this.Tips = '暂无数据'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tips {
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}

	.allList-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		margin: 20rpx 0;

		.title {
			color: #000;
			margin-top: 10rpx;
			font-size: 36rpx;
			text-align: justify;
			font-weight: bold;

			.deletetitle {
				text-decoration: line-through
			}

			.time {
				color: #999;
				font-weight: normal;
				font-size: 24rpx
			}

			.tag {
				font-size: 24rpx;
				padding: 5rpx 0;
				border-radius: 5rpx;
				margin-bottom: 10rpx;
				width: 100rpx;
				text-align: center;

				&.s2,
				&.s1 {
					color: #fff;
					background-color: #f9ae3d;
				}

				&.s3,
				&.s4,
				&.s5 {
					color: #fff;
					background-color: green;
				}

				&.s7 {
					color: #fff;
					background-color: #78d7b4;
				}

				&.delete {
					color: #fff;
					background-color: #999;
				}
			}
		}

		.desc {
			color: $color2;
			font-size: 28rpx;
			text-overflow: ellipsis;
			display: -webkit-box !important;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			margin: 10rpx 0;
			overflow: hidden;
		}
	}
</style>